<template>
	<a-breadcrumb>
		<a-breadcrumb-item v-for="item in breadcrumbList" :key="item.name">
			<p v-if="route.path === meta(item)?.path"> {{ $t(meta(item)?.meta?.title || '')}} </p>
			<a-link @click="handelTo(item)" v-else type="text" status="success">{{ $t(meta(item)?.meta?.title||'') }}</a-link>
		</a-breadcrumb-item>
	</a-breadcrumb>
</template>

<script lang="ts" setup>
import { useMenu } from "@/stores/modules/useMenu";
const props = defineProps({
	breadCrumb: {
		//面包屑配置
		type: Object,
		default: () => null
	}
});
const menuStore = useMenu();
const cacheRoutes = computed(() => menuStore.cacheRoutes);
const addRouters = computed(() => menuStore.addRouters);
const route = useRoute();
const router = useRouter();
const breadcrumbList: any = computed(() => {
	const arr = props.breadCrumb?.breadList || route.meta?.breadcrumb;//props的面包屑数组或者路由定义的
	return Array.isArray(arr) ? arr : [route.name];
});
const meta = (name) => {
	let info = {};
	if (name === "customerName") {
		info = addRouters.value.find((item) => item.path === route.path);
	} else {
		info = cacheRoutes.value.find((item) => item.name === name);
	}
	if (props.breadCrumb && route.path === info?.path) {  //面包屑有内容并且是自己当前的路由就使用传入的名字
		info.meta.title = props.breadCrumb?.name;
		menuStore.setPathMetaTitle(route.path,props.breadCrumb?.name)
	}
	return info;
};

const handelTo = (name) => {
	const info = cacheRoutes.value.find((i) => i.path === meta(name)?.path);
	console.log(info);
	if (info) {
		router.push({
			...info
		});
	} else {
		router.push({
			path: meta(name)?.path
		});
	}
};
</script>

<style scoped lang="scss">
.breadcrumb {
	background-color: transparent;
	padding: 0;
	margin: 0;
	list-style: none;
}
.breadcrumb-item + .breadcrumb-item::before {
	content: ">";
	padding: 0 5px;
}
</style>
